<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<script src="/whereismyteacher-c/WebContent/js/jquery-1.9.1.js"></script>
<script src="/whereismyteacher-c/WebContent/js/jquery-ui-1.10.3.custom.js"></script> 
<script type="text/javascript">	
	$(document).ready(function(){
		//마우스 위치 저장할 변수
//		var x = 0; 
//		var y = 0; 
		//시도,구군,이름 저장할 변수
		var region_sido="";
		var region_gugun="";
		var region_name="";
		//초기에 화면에 뿌려줄 내용
		$("#region_gugunDiv").hide();
		$.ajax({
			type:"POST",
			url:"getSidoList.do",
			dataType:"json",
			success:function(jsonData){	
				//시도 리스트 가져와서 뿌리기
				$("#region_sido option").remove();
				var op="<option value='false'>--</option>";
				$("#region_sido").append(op);
 				$.each(jsonData,function(index){	//jsonData.sidoList을 sidolist란 이름으로 사용
 					op="<option value="+jsonData[index].code_code+">"+jsonData[index].code_name+"</option>";
					$("#region_sido").append(op); 
				});
			}//success
		});//ajax

		$("#region_sido").change(function(){
			var region_sido=$(this).val();
			if(region_sido==false){//시도 값이 바뀌었는데 --을 선택한 경우
				$("#region_gugunDiv").hide();
			}else{						
				$("#region_gugunDiv").show();				
			}
 			$.ajax({
				type:"POST",
				url:"gugunList.do",
				data:"code_code="+region_sido,
				dataType:"json",
				success:function(jsonData){
					
	 				//구군정보 가져와서 뿌리기
					$("#region_gugun option").remove();
					var op="<option value=''>--</option>";
					$("#region_gugun").append(op);
	 				$.each(jsonData,function(index, codemaster){
	 					op="<option value="+codemaster.code_code+">"+codemaster.code_name+"</option>";
						$("#region_gugun").append(op); 
					});
				}
			}); 
		});
		
		$("#region_searchBtn").click(function(){
			region_sido=$("#region_sido").val();
			region_gugun=$("#region_gugun").val();
			region_name=$("#region_name").val();
			if(region_sido=="false" && region_gugun=="" && region_name==""){
				alert("검색조건을 입력하세요.");
			}else{	//조건에 따른 검색
				$.ajax({
					type:"POST",
					url:"getSearchStudentbyRegion.do",
					data:"region_name="+region_name+"&region_gugun="+region_gugun,  //	data:$("#tradeForm").serialize(),
					dataType:"json",
					success:function(jsonData){
						if(jsonData.list.length>=1){	//검색결과 1명이상이면
							$("#region_totalstudent").text("검색결과 총 학생 수 : "+jsonData.list.length);
							$("#listbyregion tbody").text("");	//기존의 내용을 지운다.
	 		 				$.each(jsonData.list,function(index, mvo){
	 		 					member_table  = "<tr><td align='center'>"+mvo.name +"</td>"+
	 		 													"<td align='center'>"+mvo.hoperegion +"</td>"+
	 		 													"<td align='center'>"+mvo.grade +"</td>"+
	 		 													"<td align='center'>"+mvo.gender +"</td>"+
	 		 													"<td align='center'>"+mvo.hopesubject +"</td></tr>";
	 		 													
	 							$("#region_memberlist_Tbody").append(member_table);				
							});
	 		 				$("#region_sido").val("");	//검색완료 후 초기화(학년셀렉트박스)
							$("#region_gugun").val("");	//검색완료 후 초기화(학년셀렉트박스)
							$("#region_gugunDiv").hide();
							$("#region_name").val("");		//검색완료 후 초기화(이름)
						}else{
							alert("검색조건에 맞는 학생이 없습니다.");	
						}
					}
				});	//ajax			
			}	// if
		});	//click
			
		//페이지 번호 클릭시
		$("a[id=pageList]").click(function(){
			var pageTable="";
			var pageNo=$(this).text();
//			alert("페이지로 : "+$(this).text());
			if(region_sido=="" && region_gugun=="" && region_name==""){
				//검색조건없이 현재탭의 페이지를 이동
//				alert("시도:"+region_sido+"구군:"+region_gugun+"이름:"+region_name);
				$.ajax({
					type:"POST",
					url:"tabStudentRegionViewPageN.do", // tab 클릭했을 때 실행하는 메서드와 동일한데 리턴값다르게
					data:"pageNo="+pageNo,  //	data:$("#tradeForm").serialize(),
					dataType:"json",
					success:function(jsonData){
						$("#region_totalstudent").text("검색결과 총 학생 수 : "+jsonData.list.length);
						$("#listbyregion tbody").text("");	//기존의 내용을 지운다.
	 		 			$.each(jsonData.list,function(index, mvo){
	 		 				member_table  = "<tr><td align='center'>"+mvo.name +"</td>"+
	 		 												"<td align='center'>"+mvo.hoperegion +"</td>"+
	 		 												"<td align='center'>"+mvo.grade +"</td>"+
	 		 												"<td align='center'>"+mvo.gender +"</td>"+
	 		 												"<td align='center'>"+mvo.hopesubject +"</td></tr>";	 													
	 						$("#region_memberlist_Tbody").append(member_table); 						
						});	//each

						//페이징처리시작
						//	alert("현재페이지 :"+jsonData.pagingBean.nowPage);
						$("#pagingView").text("");	//기존의 내용을 지운다.
						if(jsonData.pagingBean.previousPageGroup){
							pageTable="<a href='tabStudentRegionView.do?pageNo='"+(jsonData.pagingBean.startPageOfPageGroup-1) +"id='prePage' >이전 </a>";
						}
						for( i=jsonData.pagingBean.startPageOfPageGroup; i<=jsonData.pagingBean.endPageOfPageGroup; i++){
							if(jsonData.pagingBean.nowPage !=i){
								pageTable+="<a id='pageList'>"+ i +"</a>";
							}else{
								pageTable+=i;	//링크없이 페이지번호만 표시
							}
						}//for
						if(jsonData.pagingBean.nextPageGroup){
							pageTable+="<a href='tabStudentRegionView.do?pageNo='"+(jsonData.pagingBean.endPageOfPageGroup+1) +" id='postPage' >	다음 </a>";
						}							
						$("#pagingView").append(pageTable); 		
						//페이징처리 끝
					}	//success
				});	//ajax	
			}else{	//검색조건에 따른 페이지 이동
				$.ajax({
					type:"POST",
					url:"getSearchStudentbyRegion.do",
					data:"pageNo="+pageNo+"&region_name="+region_name+"&region_gugun="+region_gugun,  //	data:$("#tradeForm").serialize(),
					dataType:"json",
					success:function(jsonData){
						alert(jsonData.list.length);
						$("#region_totalstudent").text("검색결과 총 학생 수 : "+jsonData.list.length);
						$("#listbyregion tbody").text("");	//기존의 내용을 지운다.
		 				$.each(jsonData.list,function(index, mvo){
		 					member_table  = "<tr><td align='center'>"+mvo.name +"</td>"+
		 													"<td align='center'>"+mvo.hoperegion +"</td>"+
		 													"<td align='center'>"+mvo.grade +"</td>"+
		 													"<td align='center'>"+mvo.gender +"</td>"+
		 													"<td align='center'>"+mvo.hopesubject +"</td></tr>";	 													
							$("#region_memberlist_Tbody").append(member_table);				
						});
						alert("이전페이지 : "+jsonData.pagingBean.previousPageGroup);
						alert("현재페이지 : "+jsonData.pagingBean.nowPage);
						alert("다음페이지 : "+jsonData.pagingBean.nextPageGroup);
					}
				});	//ajax	
			}	//if else
		});	
		
	    $( "#dialog_studendInfo" ).dialog({
	        autoOpen: false,
	        show: { effect: "blind", duration: 100 },
	        hide: {effect: "explode", duration: 100}
//	        position: [x,y+10]
	      });	
		//학생 이름 클릭되면
 		$("a[id=studentName]").click(function(e){ 
//			alert($(this).next().val());
// 			x = e.clientX; y = e.clientY;
			var studentId=$(this).next().val();
			var information="";
			$.ajax({
				type:"POST",
				url:"getStudentInfobyId.do",
				data:"studentId="+studentId,  //	data:$("#tradeForm").serialize(),
				dataType:"json",
				success:function(jsonData){
					alert(jsonData);
//					alert("success : "+jsonData.name);
//					$("#p_studendInfo").text("");	//기존의 내용을 지운다.
					information  = '이름 : '+jsonData.name+'<br>'+
										  '과외지역 : '+jsonData.hoperegion+'<br>'+
										  '과외과목 : '+jsonData.hopesubject+'<br>'+
										  '학교학년 : '+jsonData.grade+'<br>'+
										  '전화번호 : '+jsonData.tel+'<br>'+
										  '이메일 : '+jsonData.email+'<br>'+
										  '주소 : '+jsonData.codeaddress+jsonData.subaddress+'<br>';	 													
					$("#dialog_studendInfo	").html(information);
 					$( "#dialog_studendInfo" ).dialog( "open" );					
				}	//success
			});	//ajax 			
		});		
	});
</script>

<form id=region_searchForm>
<table width="560" cellpadding="2" cellspacing="0"><tr><td>
	<table  >
		<tr>
			<td>희망지역</td>
			<td ><select id = "region_sido"></select></td>
			<td colspan="2"> <span id="region_gugunDiv" ><select id="region_gugun"></select></span></td>
			<td>이름</td><td><input type="text" id="region_name"></td>
			<td align="right"><input type="button" id="region_searchBtn" value="검색"> </td>		
		</tr>
	</table>
</td></tr></table>	
</form>
<table width="560" cellpadding="2" cellspacing="0">
	<tr align="right"><td>
<div id="region_totalstudent">총 학생 수 : ${requestScope.listVO.pagingBean.totalContent}</div>
	</td></tr></table>	
<table id="listbyregion" width="560"  border="1" cellpadding="2" cellspacing="0">
	<thead>
		<tr><td width="20%" align="center">이름</td>
			<td width="20%" align="center">희망지역</td>
			 <td width="20%" align="center">학교학년</td>
			 <td width="20%" align="center">성별</td>	 
			 <td width="20%" align="center">희망과목</td>	
		</tr>
	</thead>
	<tbody id="region_memberlist_Tbody">
			<c:forEach var="mvo" items="${requestScope.listVO.list}">		
			<tr>
			   <td align='center'><a href="#" id="studentName">${mvo.name }</a>
			    <input type="hidden" id="hidden_mvo" value="${mvo.id }"></td>
			    <td align='center'>${mvo.hoperegion}</td>
			    <td align='center'>${mvo.grade}</td>			
				<td align='center'>${mvo.gender}</td>
				<td align='center'>${mvo.hopesubject}</td>				
			</tr>
			</c:forEach>	
	</tbody>	
</table><br>

<div id="dialog_studendInfo" title="개인정보">
<!-- 	 <p id="p_studentInfo">개인정보</p> -->
</div>


<table width="560"  cellpadding="2" cellspacing="0"><tr align="center"><td>
	<div id="pagingView">
		<c:set var="pb" value="${requestScope.listVO.pagingBean}"></c:set>
		<c:if test="${pb.previousPageGroup}">
			<a href="tabStudentRegionView.do?pageNo=${pb.startPageOfPageGroup-1 }" id="prePage" >	이전 </a>
		</c:if>	
		
		<c:forEach var="pageNo" begin="${pb.startPageOfPageGroup }" 
												end="${pb.endPageOfPageGroup }">
		<c:choose>
		<c:when test="${pb.nowPage !=pageNo }" >
		<!--  <a href="tabStudentRegionView.do?pageNo=${pageNo }" id="pageList">${pageNo }</a> -->	
			<a id="pageList">${pageNo }</a>
		</c:when>
		<c:otherwise>
			${pageNo} 
		</c:otherwise>
		</c:choose>
		</c:forEach>
		
		<c:if test="${pb.nextPageGroup}">
			<a href="tabStudentRegionView.do?pageNo=${pb.endPageOfPageGroup+1 }"id="postPage" >다음 </a>
		</c:if>
	</div>
</td></tr></table>